<template>
  <div class="limit">
      <el-breadcrumb separator="/" class="mianbao">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>假期管理</el-breadcrumb-item>
      <el-breadcrumb-item>假期余额</el-breadcrumb-item>
      <el-breadcrumb-item>假期额度明细</el-breadcrumb-item>
    </el-breadcrumb>
    
    <div class="main"><p>假期额度</p> 
         <el-button @click="fanhui()" type="danger">返回</el-button>
    </div>

     <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column label="姓名" prop='name' />
      <el-table-column label="部门" prop='bumen'/>
      <el-table-column label="年假剩余额度" prop='nianjia'/>
      <el-table-column label="事假剩余额度" prop='shijia'/>
      <el-table-column label="病假剩余额度" prop='bingjia'/>
      <el-table-column label="调休假剩余额度" prop='tiaoxiu'/>
      <el-table-column label="婚假剩余额度" prop='hunjia'/>
      <el-table-column label="产假剩余额度" prop='chanjia'/>
      <el-table-column label="其他假期剩余额度" prop='qita'/>
  </el-table>
  </div>
</template>

<script setup>
import {Holidaylimit} from '@/api/ning/ning'
import { ref ,onMounted} from "vue";
import { useRouter ,useRoute} from 'vue-router'
var $router=useRouter()
var $route=useRoute()
var tableData=ref([])
var fanhui=()=>{
  $router.push('/index/jqye');
}
var tableData=ref([])

onMounted(async()=>{
   var { id }= $route.query;
    var res=await Holidaylimit({ id })
    console.log(res);
     tableData.value=res.data
})

</script>

<style lang='scss' scoped>
.mianbao {
  margin-bottom: 20px;
}
.limit{
  width: 100%;
  .main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: white;
  }
}


</style>